<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时值查看</title>
    <link rel="stylesheet" href="../src/css/common.css">
</head>
<body>
<script src="../src/js/vue-3.5.min.js"></script>
<script src="../src/js/axios.min.js"></script>
<script src="../src/js/tools.js"></script>
<div id="app">
    <div class="left">
        <div class="tab">
            <button @click="pageTo('1')">实时数据</button>
            <button @click="pageTo('2')">点位写值</button>
            <select v-model="formData.module" style="height: 29px">
                <option :value="1">SS离心机</option>
                <option :value="2">FC离心机</option>
                <option :value="3">SS热泵机组</option>
                <option :value="4">FC热泵机组</option>
            </select>
        </div>
        <div class="page1" v-if="pageIndex === '1'">
            <div class="form-box">
                <div class="form-row">
                    <textarea v-model="addrs" placeholder="请输入点位地址,多个逗号隔开" style="width: 100%;height: 50px"></textarea>
                </div>
                <div class="form-row" style="display: flex;align-items: center">
<!--                    <button @click="">&nbsp;&nbsp;&nbsp;查 询&nbsp;&nbsp;&nbsp;</button>-->
                    <span style="font-size: 14px;font-weight: bold;color: green" v-if="ws_state==='已连接'">{{ws_state}}</span>
                    <span style="font-size: 14px;font-weight: bold;color: red" v-else>{{ws_state}}</span>
                </div>
            </div>
            <hr>
            <div class="form-box">
                <table>
                    <tbody>
                    <tr>
                        <th>名称</th>
                        <th>地址</th>
                        <th>数据类型</th>
                        <th>变量值</th>
                        <th>时间</th>
                    </tr>
                    <tr v-for="(item,index) in record_list" :key="index">
                        <td>{{item.title}}</td>
                        <td>{{item.addr}}</td>
                        <td>{{item.data_type}}</td>
                        <td>{{item.value}}</td>
                        <td>{{item.create_time}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <hr>
            <div class="form-box">
                <table>
                    <tbody>
                    <tr>
                        <th>名称</th>
                        <th>地址</th>
                        <th>变量值</th>
                        <th>报警|恢复</th>
                        <th>报警时间</th>
                        <th>恢复时间</th>
                    </tr>
                    <tr v-for="(item,index) in alert_list" :key="index">
                        <td>{{item.title}}</td>
                        <td>{{item.addr}}</td>
                        <td>{{item.value}}</td>
                        <td>
                            <span v-if="item.is_recovery===0" class="red">报警</span>
                            <span v-else class="green">报警恢复</span>
                        </td>
                        <td>{{item.create_time}}</td>
                        <td>{{item.recovery_time}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="page2" v-if="pageIndex === '2'">
            <div class="form-row">
                <label>addr</label>
                <input type="text"  v-model="formData.addr" placeholder="" style="width: 100%" />
            </div>
            <div class="form-row">
                <label>value</label>
                <input type="number"  v-model.number="formData.value" placeholder="" style="width: 100%" />
            </div>
            <div class="form-row" style="display: flex;align-items: center">
                <button @click="centrifuge_variable_write">修改离心机点位值</button>
                <button @click="mcquay_variable_write">修改空调机组点位值</button>
                <button @click="get_alert_list">查看报警记录</button>
            </div>
        </div>
    </div>
    <div class="right">
        <pre>{{json_content}}</pre>
    </div>
</div>
<script>
    // 创建 Vue 3 应用实例
    const {createApp, ref, reactive, onMounted} = Vue;
    createApp({
        setup() {
            const pageIndex = ref("1")
            const addrs = ref("D35005,D35006,D35007,D35008Bit0,D35008Bit1,D35008Bit2,D35008Bit3,D35008Bit4,D35008Bit14")
            const record_list = ref([]) // 变量值记录
            const alert_list = ref([]) // 变量值记录
            const json_content = ref("")
            const base = reactive({
                api_url: "",
                ws_url: "",
                token: "",
            })
            const formData = reactive({
                addr: "D2550",
                value: 100,
                slave_id: 1,
                module: 3,
            })
            const pageTo = (index) => {
                console.log("formData",formData.module)
                pageIndex.value = index
            }

            const centrifuge_field_list = ref([])
            const get_centrifuge_field_list = () => {
                axios.get(base.api_url + '/centrifuge/field_list', {}).then(res => {
                    centrifuge_field_list.value = res.data.data.list
                }).catch(err => {
                    console.log("field_list", err)
                })
            }
            const mcquay_field_list = ref([])
            const get_mcquay_field_list = () => {
                axios.get(base.api_url + '/mcquay/field_list', {}).then(res => {
                    mcquay_field_list.value = res.data.data.list
                }).catch(err => {
                    console.log("field_list", err)
                })
            }

            const create_table_data = (point_data) => {
                if (addrs.value === "") {
                    record_list.value = []
                    return
                }
                let arr = addrs.value.split(",")
                let tmp_list = []
                for(let addr of arr) {
                    if(addr === "") {
                        continue
                    }
                    if (formData.module === 1 || formData.module === 2) {
                        // console.log("centrifuge_field_list = ",centrifuge_field_list.value)
                        for(let row of centrifuge_field_list.value) {
                            if(row.addr === addr) {
                                for(let key in point_data) {
                                    if(key === addr) {
                                        row.value = point_data[key]
                                        row.create_time = getDate()
                                        tmp_list.push(row)
                                        break
                                    }
                                }
                                break
                            }
                        }
                    }else {
                        // console.log("mcquay_field_list = ",mcquay_field_list.value)
                        for(let row of mcquay_field_list.value) {
                            if(row.addr === addr) {
                                // console.log("找到了",addr,point_data)
                                for(let key in point_data) {
                                    if(key === addr) {
                                        row.value = point_data[key]
                                        row.create_time = getDate()
                                        tmp_list.push(row)
                                        break
                                    }
                                }
                                break
                            }
                        }
                    }
                }
                record_list.value = tmp_list
            }
            const jsonFormat = (obj) => {
                return JSON.stringify(obj, null, 4)
            }

            let socket = null
            const ws_state = ref("正在连接")
            const connectWebSocket = () => {
                socket = new WebSocket(base.ws_url);
                socket.onopen = function (res) {
                    console.log("连接成功");
                    ws_state.value= "已连接"
                }
                socket.onclose = function (e) {
                    ws_state.value= "连接失败或断开,3秒后重连"
                    setTimeout(() => {
                        ws_state.value= "正在尝试重连"
                        connectWebSocket()
                    },3000)
                }
                socket.onerror = function (err) {
                    console.log("WebSocket error observed", err);
                }
                socket.onmessage = function(e) {
                    let obj = JSON.parse(e.data)
                    // console.log("obj",obj)
                    if(obj.code === formData.module){
                        let point_data = JSON.parse(obj.data)
                        console.log("obj.code:"+obj.code,point_data)
                        create_table_data(point_data)
                    }else if (obj.code > 100) {
                        alert_list.value = JSON.parse(obj.data)
                        console.log("code:"+obj.code,alert_list.value)
                    }
                };
            }

            const centrifuge_variable_write = () => {
                axios.get(base.api_url + '/centrifuge/write?slave_id='+formData.slave_id+'&addr='+formData.addr+'&value='+formData.value).then(res => {
                    json_content.value = jsonFormat(res.data)
                }).catch(err => {
                    console.log("centrifuge_variable_write", err)
                })
            }

            const mcquay_variable_write = () => {
                axios.get(base.api_url + '/mcquay/write?slave_id='+formData.slave_id+'&addr='+formData.addr+'&value='+formData.value).then(res => {
                    json_content.value = jsonFormat(res.data)
                }).catch(err => {
                    console.log("mcquay_variable_write", err)
                })
            }

            const get_alert_list = () => {
                axios.post(base.api_url + '/centrifuge/alert_list',{page:1,size:10}).then(res => {
                    json_content.value = jsonFormat(res.data)
                }).catch(err => {
                    console.log("get_alert_list", err)
                })
            }

            onMounted(() => {
                let page = getUrlParam("page")
                if(!page) {
                    pageIndex.value = "1"
                }else {
                    pageIndex.value = page
                }
                base.api_url = getLocalStorage("api_url")
                base.ws_url = getLocalStorage("ws_url")
                base.token = getLocalStorage("token")
                connectWebSocket()
                get_centrifuge_field_list()
                get_mcquay_field_list()
            })
            return {
                addrs,
                record_list,
                alert_list,
                json_content,
                ws_state,
                pageIndex,
                formData,
                pageTo,
                centrifuge_variable_write,
                mcquay_variable_write,
                get_alert_list,
            };
        }
    }).mount('#app');
</script>
</body>
</html>